<template>
	<view class="content">
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="{use: false}">
			<view class="section-1">
				<view class="section-body">
					<view class="list">
						<view class="item" @click="palyVideo(item.video_url)" v-for="item in list" :key="item.id">
							<text>{{item.create_time? item.create_time.substring(0, 10) : '-'}}</text>
							<view class="iconfont icon-xiazai"></view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>
<script>
	import { videoListApi } from '@/api/statistics.js';
	export default {
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				pageSize: 20,
				list: [],
				project_id: 0,
				ticket_id: 0,
				curIdx: 0,
				curName: '检查扣分',
			}
		},
		onLoad(data) {
			this.project_id = data.project_id;
			this.ticket_id = data.ticket_id;
		},
		methods: {
			palyVideo(url) {
				uni.navigateTo({
					url: '/pages/common/video_player/index?url=' + url
				})
			},
			setCurIdx(idx, name) {
				this.curIdx = idx;
				this.curName = name;
				uni.showLoading({
					title: '加载中。。。'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0,0);
			},
			handleResetForm(){
				for (let key in this.form) {
					this.form[key] = '';
				}
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0,0);
			},
			handleSearch(){
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0,0);
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			async upCallback(page) {
				const {data} =  await videoListApi({
					project_id: this.project_id,
					ticket_id: this.ticket_id,
					page: page.num,
					pageSize: this.pageSize,
				});
				
				if (data.code === 1 || data.code === 200) {
					// 接口返回的当前页数据列表 (数组)
					let curPageData = data.data.data; 
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length; 
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.data.data.last_page; 
					//设置列表数据
					if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
				
					this.list = this.list.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage); 
					setTimeout(()=>{
						this.mescroll.endSuccess(curPageLen);
					},20);
				} else{
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
		},
	}
</script>

<style lang="scss" scoped>	
	.section-1{
		width: 100%;
		background: #2e5efe;
		.section-body{
			width: 100%;
			height: 100%;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			overflow: hidden;
			.list{
				width: 100%;
				box-sizing: border-box;
				padding: 0 35rpx;
				padding-top: 40rpx;
				.item{
					width: 100%;
					border-radius: 30rpx;
					@include common-box-shadow;
					margin-bottom: 40rpx;
					box-sizing: border-box;
					padding: 30rpx 20rpx;
					display: flex;
					justify-content:space-between;
					text{
						word-break: break-all;
						font-size: 26rpx;
						color: #1d33c6;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>
